<template>
  <view id="__nc">
    <view id="nc" />
  </view>
</template>

<script>
export default {
  name: 'SlideVerify',
  data() {
    return {};
  },
  mounted() {
  //#ifdef H5
    this.init()
  // #endif
  },
  methods: {
    init() {
      setTimeout(() => {
        const _this = this
        // 实例化nc
        AWSC.use('nc', function(state, module) {
        // 初始化
          const option = {
            appkey: 'FFFF0N0000000000AB78',
            //使用场景标识。
            scene: 'nvc_login_h5',
            // 声明滑动验证需要渲染的目标ID。
            renderTo: 'nc',
            width: '300',
            //前端滑动验证通过时 返回 会话ID（sessionId）、签名串（sig）、请求唯一标识（token）
            success: function(data) {
              _this.$emit('seccess', data)
            },
            // 滑动验证失败
            fail: function(failCode) {
              window.console && console.log(failCode)
            },
            // 验证码加载出现异常
            error: function(errorCode) {
              window.console && console.log(errorCode)
            }
          }
          window.nc = module.init(option);
        })
      }, 500)
    }
  }
}
</script>

<style>
	#__nc {
		position: relative;
		width: 300px;
		height: 60px;
		margin: 0 auto;
		text-align: center;
	}

	#nc {
		bottom: 0;
		left: 50%;
		transform: translate(-50%);
	}

	.nc-container #nc_1_wrapper {
		width: 100% !important;
	}

	.nc-container .nc_scale span {
		height: 35px !important;
		line-height: 35px !important;
	}
</style>
